<template xmlns="http://www.w3.org/1999/html">
  <div class="listStyle">
      <table border="1" rules="all" style="width: 100%;color: black">
        <tr v-for="(item,index) in taskList">
          <td style="border-right:none;width:80%" ><input type="checkbox" :checked="item.isChecked" @click="clickChecked(index)"/><span>{{ item.title }}</span></td>
          <td style="border-left: none"><button class="delBtn" @click="delectItem(index)">删除</button></td>
        </tr>
      </table>
  </div>
</template>

<script>
export default {
  name: "List",
  props:{
    taskList:{
      type:Array,
      default(){
        return []
      }
    }
  },
  data() {
    return {
      checked1: false,
      checked2: true,
    };
  },
  methods:{
    clickChecked(index){
      this.$emit('isChecked',index)
    },
    delectItem(index){
      this.$emit('deleteItem',index)
    },
  }
}
</script>

<style scoped>
.listStyle{
  margin-top: 5px;
  width: 100%;
  line-height: 30px;
}
.delBtn{
  float: right;
  background-color: #e65d46;
  color:white;
  border: none;
  font-size: 12px;
  padding: 5px 12px;
}
</style>
